<template>
	<view class="content">
		<u-navbar title="去水印" backIconColor="#fff" titleColor="#fff" :background="background"></u-navbar>
		</u-navbar>
		<u-notice-bar mode="horizontal" :list="noticeList" :duration="5000"></u-notice-bar>
		<!-- <u-swiper :list="list3" indicator indicatorMode="line" circular></u-swiper> -->
		<ad unit-id="你自己的广告id" ad-type="video" ad-theme="white"></ad>
		<view class="copyInput">
			<text>输入图片链接</text>
			<!-- <text style="font-size: 10px;color: #5f7ea7;">粘贴链接</text> -->
		</view>
		<view class="con-lj">
			<u-input v-model="input_link" placeholder="请输入视频/图片链接" border="bottom" clearable="true"
				placeholderStyle="font-size:10px" fontSize="12px"></u-input>
		</view>
		<view style="padding: 15px;">
			<button class="btn-sty"  @click="pasteLink">一键粘贴</button>
		</view>
		<view class="uGrid">
			<u-grid :border="true" col="2">
				<u-grid-item v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex">
					<i :class="baseListItem.name" style="margin-top:10px"></i>
					<text class="grid-text" @click="click(baseListItem.name)">{{baseListItem.title}}</text>
				</u-grid-item>
			</u-grid>
			<u-toast ref="uToast" />
		</view>
		<!-- 图片 -->
		<view class="" v-if="showImage">
			<!-- 一张图片 -->
			<view class="" style="width: 95%;padding: 10px;" v-show="urlList.length<2">
				<view class="videoORphotoOne" v-for="(item,index) in urlList" :key="index">
					<u-image :src="item" mode="widthFix" radius="10px" lazyLoad="true" :fade="true" duration="450"
						width="100%" height="100%">
					</u-image>

				</view>
			</view>
			<!-- 多张图片 -->
			<view class="bigbigBox" v-if="urlList.length > 1 "
				style="width: 95%;display: flex;justify-content: space-between;flex-wrap: wrap;padding: 10px;box-size:border-box">
				<view class="videoORphotoMany" v-for="(item,index) in urlList" :key="index"
					style="width: 30%;height: 110px;">
					<u-image mode="scaleToFill" :src="item" radius="6rpx" lazyLoad="true" :fade="true" duration="450"
						width="100%" height="100px">
					</u-image>
				</view>
			</view>
		</view>
		<!-- 视频 -->
		<view class="uni-padding-wrap uni-common-mt" v-else style="padding: 5px;">
			<view>
				<video id="myVideo" style="width: 100%;" v-if="showVideo" :src="videoUrl" @error="videoErrorCallback"
					:danmu-list="danmuList" :show-fullscreen-btn="false" :show-mute-btn="true" :object-fit="fill"
					controls></video>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list3: [
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],
				baseList: [{
						name: 'iconfont icon-quchushuiyin',
						title: '去除水印(-1积分)'
					},
					{
						name: 'iconfont icon-kepujiaocheng',
						title: '去除教程'
					},
					{
						name: 'iconfont icon-xiazaivideo',
						title: '下载视频'
					}, {
						name: 'iconfont icon-xiazaiimage',
						title: '下载图片'
					},
				],
				urlList: [], //去除水印之后的图片的url
				input_link: '',
				videoUrl: '', //去除水印之后的视频url
				showVideo: false,
				showImage: false,
				background: this.TopColor,
				backTextColor: {
					'color': '#ffffff'
				},
				noticeList: ['点击下面的 [去除教程]，可学习如何去水印！']
			}
		},
		onLoad() {

		},
		methods: {
			back() {
				if (getCurrentPages().length > 1) {
					console.log("a")
					uni.navigateBack({
						delta: 1
					});
				} else {
					console.log("b")
					uni.switchTab({
						url: '/pages/index/index'
					});
				}
			},
			async click(name) {
				let _this = this;
				if (name == 'iconfont icon-quchushuiyin') {
					const userInfo = this.$db.get("userInfo");
					var patton =
						/(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:\/~\+#!\$\(\)\\|]*[\w\-\@?^=%&\/~\+#!\$\(\)\\|])?/,
						patton_res = _this.input_link.match(patton);
					if (patton_res) {
						this.input_link = patton_res[0]
					}
					if (!_this.input_link || !patton_res) {
						uni.showModal({
							title: '提示',
							content: '您输入的链接格式错误',
							success: function(res) {
								return
							}
						});
						return
					}
					if (userInfo) {
						//去除水印
						let detectReponsePromise = await this.$http.get("/removeWatermark/detect", {
							"url": _this.input_link
						});
						let detectReponse = await detectReponsePromise
						if (!detectReponse.success) {
							uni.showModal({
								title: '提示',
								content: detectReponse.errMessage,
								confirmText: "知道了"
							});
						} else {
							//设置文件路径
							let detectData = detectReponse.data;
							if (detectData.type == 'video_type') {
								_this.videoUrl = detectData.urls
								_this.showVideo = true
								_this.showImage = false
							}else if (detectData.type == 'image_type') {
								console.log("去水印",detectData.urls)
								_this.urlList = detectData.urls
								_this.showImage = true
								_this.showVideo = false						}
						}
					} else {
						uni.showModal({
							title: '提示',
							content: '请先登录，再去水印！',
							confirmText: "去登录",
							success: function(res) {
								if (res.confirm) {
									this.$common.jumpToLogin()
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}
				} else if (name == 'iconfont icon-kepujiaocheng') {
					uni.navigateTo({
						url: '/pages/remove_watermark/jiaocheng'
					})
				} else if (name == 'iconfont icon-xiazaivideo') {
					if (_this.videoUrl) {
						console.log(_this.videoUrl)
						uni.downloadFile({
							url: _this.videoUrl[0],
							success: (downloadResult) => {
								if (downloadResult.statusCode === 200) {
									uni.saveVideoToPhotosAlbum({
										filePath: downloadResult.tempFilePath,
										success: (saveResult) => {
											_this.videoUrl = ''
											_this.showVideo = false
											uni.showModal({
												title: '提示',
												content: '视频保存成功!',
												showCancel: false,
												confirmText: "知道了"
											});
										},
										fail: (err) => {
											console.log(err);
										}
									});
								}
							},
							fail: (err) => {
								const jsonString = JSON.stringify(err);
								uni.showModal({
									title: '保存视频失败',
									content: jsonString,
									showCancel: false,
									confirmText: "知道了"
								});
								console.log(err);
							}
						});
					} else {
						uni.showModal({
							title: '提示',
							content: '您没有去除水印的视频!',
							showCancel: false,
							confirmText: "知道了"
						});
					}
				} else if (name == 'iconfont icon-xiazaiimage') {
					if (_this.urlList.length > 0) {
						for (var i = _this.urlList.length - 1; i >= 0; --i) {
							console.log(i)
							uni.downloadFile({
								url: _this.urlList[i],
								success: (downloadResult) => {
									if (downloadResult.statusCode === 200) {
										uni.saveImageToPhotosAlbum({
											filePath: downloadResult.tempFilePath,
											success: (saveResult) => {
												_this.urlList.splice(i, 1);
											},
											fail: (err) => {
												console.log(err);
											}
										});
									}
								},
								fail: (err) => {
									const jsonString = JSON.stringify(err);
									uni.showModal({
										title: '下载图片失败',
										content: jsonString,
										showCancel: false,
										confirmText: "知道了"
									});
								}
							});
						}
						uni.showModal({
							title: '注意',
							content: '图片保存成功!',
							showCancel: false,
							confirmText: "知道了"
						});
					} else {
						uni.showModal({
							title: '注意',
							content: '您没有没有去除水印的图片!',
							showCancel: false,
							confirmText: "知道了"
						});
					}
				}
			},
			pasteLink() {
				uni.getClipboardData({
					success: res => {
						this.input_link = res.data
					},
					fail: err => {
						console.error(err);
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.copyInput {
		height: 30rpx;
		border-left: 15rpx solid #468cec;
		margin-top: 35rpx;
		display: flex;
		margin-left: 20rpx;
		justify-content: space-between;
		padding: 0rpx 30rpx;
		box-sizing: border-box;
		font-size: 25rpx;
	}


	.uGrid {
		margin-top: 20rpx;
		border-top: 16rpx solid #e7e6e4;
		border-bottom: 16rpx solid #e7e6e4;
	}

	.grid-text {
		font-size: 24rpx;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}
	.con-lj{
		margin-top: 30rpx;
		padding: 10rpx 30rpx;
	}
   .btn-sty{
	   background-color: #8dcdff ;
	   color: #fff;
   }
</style>